<template>
  <pure-panel-card class="panel-card">
    <div slot="header">
      处理记录
    </div>
    <div slot="subHeader">
      <span
        class="createUser"
      >建单人:
        <span>
          1
        </span>
      </span>
      <span
        class="createTime"
      >
        建单时间:
        <span>1</span>
      </span>
    </div>
    <div v-for="(item,index) in makeList" :key="index">

      <!-- 完成 -->
      <template v-if="item.makeType==='complete'">
        <div class="card__header">处理{{ index+1 }}: {{ item.makeTypeToName }}</div>
      </template>
      <!-- 转交 -->
      <template v-if="item.makeType==='forward'">
        <div class="card__header"><span>处理{{ index+1 }}: {{ item.makeTypeToName }}</span></div>
        <el-descriptions
          :column="2"
          border
          :colon="false"
        >
          <el-descriptions-item label="处理人">
            {{ item.makeUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="处理时间">
            {{ item.operDate }}
          </el-descriptions-item>
          <el-descriptions-item label="转交至" :span="2">
            {{ }}
          </el-descriptions-item>
          <el-descriptions-item label="转交原因" :span="2" />
          <el-descriptions-item label="说明" :span="2">
            {{}}
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <!-- 退回 -->
      <template v-if="item.makeType==='complete'">
        <div class="card__header">处理{{ index+1 }}: {{ item.makeTypeToName }}</div>
      </template>
      <!-- 工单升级 -->
      <template v-if="item.makeType==='end_upgrade'">
        <div class="card__header">处理{{ index+1 }}: {{ item.makeTypeToName }}</div>
        <el-descriptions
          :column="2"
          border
          :colon="false"
        >
          <el-descriptions-item label="处理人">
            {{ item.makeUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="处理时间">
            {{ item.operDate }}
          </el-descriptions-item>
          <el-descriptions-item label="需求标题" :span="2">
            {{ item }}
          </el-descriptions-item>
          <el-descriptions-item label="需求描述" :span="2">
            {{}}
          </el-descriptions-item>
          <el-descriptions-item label="设计系统" :span="2">
            {{}}
          </el-descriptions-item>
          <el-descriptions-item label="设计系统" :span="2">
            {{}}
          </el-descriptions-item>
          <el-descriptions-item label="设计系统" :span="2">
            {{}}
          </el-descriptions-item>
          <el-descriptions-item label="设计系统" :span="2">
            {{}}
          </el-descriptions-item>
          <el-descriptions-item label="设计系统" :span="2">
            {{}}
          </el-descriptions-item>
          <el-descriptions-item label="设计系统" :span="2">
            {{}}
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <!-- 多人协作 -->
      <template v-if="item.makeType==='complete'">
        <div class="card__header">处理{{ index+1 }}: {{ item.makeTypeToName }}</div>
      </template>
      <!-- 处理 -->
      <template v-if="item.makeType==='making'">
        <div class="card__header">处理{{ index+1 }}: {{ item.makeTypeToName }}</div>
        <el-descriptions
          :column="2"
          border
          :colon="false"
        >
          <el-descriptions-item label="处理人">
            {{ item.makeUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="处理时间">
            {{ item.operDate }}
          </el-descriptions-item>
          <el-descriptions-item label="处理内容" :span="2">
            {{ item }}
          </el-descriptions-item>
          <el-descriptions-item label="附件" :span="2">
            {{}}
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </div>
  </pure-panel-card>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      makeList: [],
    };
  },
  watch: {
    data: {
      handler: function (val) {
        this.makeList = val.makeList;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    convertForward(data) {
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/common/styles/theme/handle.scss";
.card__header {
  display: flex;
  align-items: center;
  height: 47px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  @include font_color_imp('color-assist-gray');
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  &::before {
    content: '';
    width: 5px;
    height: 50%;
    margin-right: 6px;
    top: 0;
    left: 0;
    @include background_color_imp('color-primary');
  }
}
</style>
